<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="../../resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="../../resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataStores.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataTables.js" charset="utf-8"></script>
		<script type="text/javascript" src="vault.js"></script>
				
	<script type="text/javascript"> var d_i=0; var c_i=0; var m_i=0; var y_i=0; var i=0;</script>
	<script>
			
	
			Ext.application({
			name: 'AIOS',
			requires: [
			          	'Ext.data.Store',
			          	'Ext.dataview.List',
			      		'Ext.Toolbar',
			           	'Ext.chart.Chart', 
					   	'Ext.chart.interactions.PanZoom',
						'Ext.chart.series.*', 
						'Ext.chart.axis.*', 
						'Ext.chart.*',
						'Ext.TitleBar',
						'Ext.draw.Component',
						'Ext.chart.CartesianChart',
						'Ext.Viewport.*'
			           
			       ],
			launch: function() {
				
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					activeItem: 5,
					tabBarPosition: 'bottom',

					items: [
					        
//************************************** Disabled **************************************************************************				        

							{
						    title: ' ',
						    styleHtmlContent: true,
						    scrollable: true,
						    
						    listeners: {
						    	activate: function() {
						    		this.setHidden(true);
								}
							},
						 }, 
					        
//************************************** Present View **************************************************************************				        
					    
				            {
				                title: '現在値',
				              	iconCls: 'now',
				                styleHtmlContent: true,
				                scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "currentView.html"
									}
								},

				            items: [

					 	     				]
					 	      		 },
				 		    		
//***************************************** Day View *********************************************************				                
				                
				            {
				                title: '日',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
								
								listeners: {
									activate: function() {
										document.location.href = "dayView.html"
									}
								},
				            },
				            
// ******************************************** Month View *************************************************************				            
				            
				            {
				                title: '月',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "monthView.html"
									}
								},
				            },
				                			
// *************************************************** Year View *******************************************************			 	                

				           	{
				                title: '年',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "yearView.html"
									}
								},
				       		},
				                
//************************************** Statistic View *********************************************************************************************

				            {
				                title: '統計',
				              	iconCls: 'chart',
				              	pressed : true,
				              	styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},
	
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('wattage');
												wattComponent.setValue(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('amperage');
												ampereComponent.setValue(value.response.electric_current);
												
											},
	
											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										});
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2014-07-12&date_end=2014-07-12',
											type: 'GET',
											crossDomain: true,
											dataType: "json",
											callbackkey: 'callback',
											scope: this,
											/* params: {
												tap_id: 1
											}, */
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												storeCurrentYearStatisticsData(value);
										    },
										    

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										}); 
										
                                        Ext.data.JsonP.request({
                                            url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2014-07-12&date_end=2014-07-12',
                                            type: 'GET',
                                            crossDomain: true,
                                            dataType: "json",
                                            callbackkey: 'callback',
                                            scope: this,
                                            /* params: {
                                                tap_id: 1
                                            }, */
                                            scope: this,      /// fix handler scope
    
                                            callback: function (response, value, request) {
                                                storeCurrentYearStatisticsData(value);
                                                
                                              //  Ext.Msg.alert("Current Sucessfully");
                                                
                                                Ext.data.JsonP.request({
                                                    url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2013-07-12&date_end=2013-07-12',
                                                    type: 'GET',
                                                    crossDomain: true,
                                                    dataType: "json",
                                                    callbackkey: 'callback',
                                                    scope: this,
                                             
                                                    scope: this,      /// fix handler scope
            
                                                    callback: function (response, value, request) {
                                                    //	Ext.Msg.alert("Past Sucessfully");
                                                        storePastYearStatisticsData(value);
                                                    },
                                                    

                                                    failure: function (response, request) {
                                                        Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
                                                    }
                                                });
                                            },
                                            

                                            failure: function (response, request) {
                                                Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
                                            }
                                        }); 
									}
								},
								
								

				            items: [
				                    
					///////////////////// Header ////////////////////
				                    
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '統計',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				name: 'options',
				 		       				store : storeTap,
				 		       				displayField: 'tapGroupName',
				 		       		 		valueField: 'tapGroupID',
				 		       			}
				 		       			]
				 		            },
				 		            
				 		            
		//////////////////////////// Set Current Wattage and Amperage///////////////////////
				 		    		
				 	               {
				 		    			xtype: 'fieldset',
				 		    		 	layout: {
				 		                    type: 'hbox',
				 		                    pack: 'start', 
				 		                   align: 'middle'
				 		                },
				 		    			items: [
				 		    			
				 		    			{	
				 		    				 	xtype: 'label',
				 		    				 	html: '現在の使用電力（全体) - ', 
				 		    			},
				 		    			{
				 		    					xtype: 'textfield',
				 		    					id: 'wattage',
				 		    					label: 'W :',
				 		    					readOnly: true,
				 		    					text: '1890.9W'
				 		    				},
				 		    				{
				 		    					xtype: 'textfield',
				 		    					id: 'amperage',
				 		    					label: 'A :',
				 		    					readOnly: true,
				 		    					text: '18.91A'
				 		    			}]
				 		    		},
				 		            
				 		            
				 		            
				 		            
				 		            
				 		            
				 		            
				 		           {
				 	                   xtype: 'carousel',
				 	                   height: 550,
					 	         		width: '100%',

				 	                   defaults: {
				 	           				styleHtmlContent: true	
				 	           			},

						 	           items: [
						 	                   
						 	/*                   {
													
													xtype: 'chart',
													background: 'white',
													width: '100%',
													height: 550,
																					
										            animate: true,
										            shadow : true,
										            store: storeStatistic,
										       
										             axes: [{
											                type: 'numeric',
											                position: 'left',
											                fields: ['d1T','d1M','d2T','d2M'],
											                title: {
											                    text: '電力量(kWh)',
											                    fontSize: 15,
											                },
											                
											                grid: {
											                    odd: {
											                        opacity: 0.25,
											                        fill: '#ddd',
											                        stroke: '#bbb',
											                        'stroke-width': 0.5
											                    }
											                },
											                minimum: 0
												       		 }, 

												       			 {
												                type: 'category',
												                position: 'bottom',
												                fields: ['name'],
												                title: {
												                    text: '月',
												                    fontSize: 15
												                }
												         }],
												            
												    series: [{
												                type: 'bar',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                     fillStyle: '#F0A50A'
												                },
																fill: true,
																axis: 'left',
												                xField: 'name',
												                yField:'d1T',
												            },
												             {
												                type: 'line',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                    stroke: '#C20024'
												                },
																markerConfig: {
												                    type: 'circle',
																	size: 1,
																	radius: 1,
																	stroke: '#C20024',
																	'stroke-width': 1
												                },
																fill: false,
												                xField: 'name',
												                yField: 'd1M'
												               
												            }, 
												            {
												                type: 'bar',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                     fillStyle: '#99CC00',
												                     
												                },
																fill: true,
																axis: 'left',
												                xField: 'name',
												                yField:'d2M',
												            },
												             {
												                type: 'line',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                    stroke: '#330099'
												                },
																markerConfig: {
												                    type: 'circle',
																	size: 1,
																	radius: 1,
																	stroke: '#330099',
																	'stroke-width': 1
												                },
																fill: false,
												                xField: 'name',
												                yField: 'd2T'
												            } 
												            
												            
												            ] 
												}, */
												{
													
													xtype: 'panel',
										 		    html: '<iframe src="extGraph/examples/charts/Mixed.html" width="100%" height="480" frameBorder="0" scrolling="no"></iframe>'
													},
												
												   {

													xtype: 'fieldset',
													id : 'statisticTableView',
													items: [
													        {
													        	xtype: 'panel',
																width: '100%',
																height : '100%',
																styleHtmlContent: true,
																html: [generateHtmlStatisticTable(storeStatistic)],
													        }
													       
														]
							 		    			
							 	                }, 
				 	     				]
				 	      		 },
				 		            
				 		            
				                ]},
					]
				});
			}
		});
	</script>

    

 </head>

 <body>
 </body>

</html>
